<template>
  <div id="main" ref="mybox" style="width: 150px;height: 150px"></div>
</template>
<script>
  import Vue from 'vue'
  import Component from 'class-component'
  import ECharts from 'echarts'

  @Component({
    props: {
      ratio: {
        type: Number,
        default: () => 0
      },
      data: {
        type: String,
        default: () => ''
      },
      color: {
        type: String,
        default: () => '#ff98e0'
      }
    },
    watch: {
      'data': function () {
        this.setOptions(this.data, this.ratio)
      }
    }
  })
  export default class RatioAnnularChart extends Vue {
    testChart = null
    setOptions (data, ratio) {
      let option = {
        title: {
          text: data,
          x: 'center',
          y: 'center',
          textStyle: {
            fontWeight: 'normal',
            color: this.color,
            fontSize: 20
          }
        },
        tooltip: {
          show: false
        },
        toolbox: {
          show: false
        },
        // color : ['#3dd4de','#b697cd','#a6f08f'],
        backgroundColor: 'rgb(58,58,58)',
        series: [
          {
            name: 'Pie',
            type: 'pie',
            clockWise: false,
            radius: [60, 65],
            itemStyle: this.dataStyle,
            hoverAnimation: false,
            center: ['50%', '50%'],
            data: [{
              value: ratio,
              itemStyle: {
                normal: {
                  color: this.color,
                  shadowColor: this.color,
                  shadowBlur: 10,
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'normal',
                    color: this.color
                  }
                }
              }
            }, {
              value: 100 - ratio,
              name: 'invisible',
              itemStyle: this.placeHolderStyle
            }]
          }
        ]
      }
      this.testChart.setOption(option)
    }
    placeHolderStyle = {
      normal: {
        color: 'rgba(44,59,70,1)', // 未完成的圆环的颜色
        label: {
          show: false
        },
        labelLine: {
          show: false
        }
      },
      emphasis: {
        color: 'rgba(44,59,70,1)' // 未完成的圆环的颜色
      }
    }
    dataStyle = {
      normal: {
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        shadowBlur: 40,
        shadowColor: 'rgba(40, 40, 40, 0.5)'
      }
    }
    mounted () {
      this.testChart = ECharts.init(this.$refs.mybox)
    }
  }
</script>
